<template>
	<view>
		<header-bar :title=titleName>
			<uni-icons type="undo" size="23" slot="back"></uni-icons>
		</header-bar>
		<view class="order-item">
			<view class="good-box">
				<image
					src="https://img12.360buyimg.com/n1/jfs/t1/167508/36/10422/162130/6034d1e0E2e7d9370/424df372a83a04c6.jpg.avif"
					class="good-img">
				</image>
				<view class="good-info">
					<view class="good-title">
						电动喷雾器农用手提式打药机农药弥雾机喷雾机高压充电果树园林打药泵隔膜泵洗车机器抽水机
					</view>
					<view class="good-bottom">
						<view class="good-price p1">
							心意价：¥{{400}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-item">
			<view class="good-box">
				<image
					src="https://img11.360buyimg.com/n7/jfs/t1/132076/1/24748/222997/62320011Ec5972b50/6e1341aaa206713a.jpg"
					class="good-img">
				</image>
				<view class="good-info">
					<view class="good-title">
						极景 压力喷壶浇花家用园艺植物气压式喷雾瓶器浇水壶洒水壶喷水壶支持消毒液喷洒 2L豪华款橙色
					</view>
					<view class="good-bottom">
						<view class="good-price p1">
							心意价：¥{{10}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-item">
			<view class="good-box">
				<image
					src="https://img14.360buyimg.com/n7/jfs/t1/124867/15/22230/364939/627e19baEfa101c51/63857b9347aa5e71.jpg"
					class="good-img">
				</image>
				<view class="good-info">
					<view class="good-title">
						四冲程汽油微耕机松土机旋耕机耕地机小型农用翻地机开沟机除草机 宗申配松土刀行走轮除草轮开沟器
					</view>
					<view class="good-bottom">
						<view class="good-price p1">
							心意价：¥{{2500}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-item">
			<view class="good-box">
				<image
					src="https://img14.360buyimg.com/n1/jfs/t1/214078/21/311/232262/6167d570E012daaed/43f3043ab9fad1a4.jpg.avif"
					class="good-img">
				</image>
				<view class="good-info">
					<view class="good-title">
						朔铠园艺工具套装种花剪养花工具箱家用阳台盆景栽花大号赶海小铲子盆栽花卉工具铲土用品
					</view>
					<view class="good-bottom">
						<view class="good-price p1">
							心意价：¥{{5.0}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<button @click="go">发布易货</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleName: "我的易货",
			}
		},
		methods: {
			go: function() {
				uni.navigateTo({
					url: '/subpkg/barterform/barterform'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-item {
		width: 710rpx;
		height: 230rpx;
		background: #d2fdff;
		border: 1px solid lightgrey;
		opacity: 1;
		display: flex;
		margin-top: 30rpx;
		margin-left: 20rpx;
		border-radius: 20px;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.order-item .good-box {
		width: 670rpx;
		height: 230rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-item .good-box .good-img {
		margin-left: -20rpx;
		width: 230rpx;
		height: 230rpx;
		opacity: 1;
		border-radius: 20px;
	}

	.good-box .good-info {
		width: 420rpx;
		height: 240rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.good-info .good-title {
		margin-top: 15px;
		margin-left: -35rpx;
		width: 420rpx;
		height: 88rpx;
		font-size: 27rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 45rpx;
		color: #000000;
		opacity: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.good-info .good-bottom {
		width: 100%;
		height: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.good-info .good-bottom .good-price {
		height: 20rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 20rpx;
		color: red;
		opacity: 1;
		margin-top: -30rpx;
	}

	button {
		width: 200rpx;
		height: 80rpx;
		margin-top: 35rpx;
		color: white;
		font-size: 32rpx;
		background-color: rgb(0, 208, 208);
	}
</style>
